<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>TUTU商城-购物车</title>
    {% load static %}<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %} ">
    {% load static %}<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %} ">
    {% load static %}<script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %} "></script>
    {% load static %}<script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %} "></script>
</head>
<body>
    <div id="app">
        <div class="header_con">
            <div class="header" v-cloak>
                <div class="welcome fl">欢迎来到TUTU商城!</div>
                <div class="fr">
                    <div v-if="username" class="login_btn fl">
                        欢迎您：<em>[[ username ]]</em>
                        <span>|</span>
                        <a href="{% url 'users:logout' %}">退出</a>
                    </div>
                    <div v-else class="login_btn fl">
                        <a href="{% url 'users:login' %}">登录</a>
                        <span>|</span>
                        <a href="{% url 'users:register' %}">注册</a>
                    </div>
                    <div class="user_link fl">
                        <span>|</span>
                        <a href="{% url "users:info" %}">用户中心</a>
                        <span>|</span>
                        <a href="{% url 'carts:info' %}">我的购物车</a>
                        <span>|</span>
                        <a href="{% url 'users:myorderinfo' 1 %}">我的订单</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="search_bar clearfix">
            <a href="{% url 'contents:index' %} " class="logo fl"></a>
            <div class="search_wrap fl">
                <form method="get" action="/search/" class="search_con">
                    <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                    <input type="submit" class="input_btn fr" name="" value="搜索">
                </form>
                <ul class="search_suggest fl">
                    <li><a href="#">索尼微单</a></li>
                    <li><a href="#">优惠15元</a></li>
                    <li><a href="#">美妆个护</a></li>
                    <li><a href="#">买2免1</a></li>
                </ul>
            </div>
        </div>
        <div class="total_count">全部商品<em>{{ total_count }} </em>件</div>
        <ul class="cart_list_th clearfix">
            <li class="col01">商品名称</li>
            <li class="col02">商品单位</li>
            <li class="col03">商品价格</li>
            <li class="col04">数量</li>
            <li class="col05">小计</li>
            <li class="col06">操作</li>
        </ul>
        <ul class="cart_list_td clearfix" v-for="(cart_sku,index) in carts" v-cloak>
            <li class="col01"><input type="checkbox" name="" v-model="cart_sku.selected" @change="update_selected(index)"></li>
            <li class="col02"><img :src="cart_sku.default_image_url"></li>
            <li class="col03">[[ cart_sku.name ]]</li>
            <li class="col05">[[ cart_sku.price ]]元</li>
            <li class="col06">
                <div class="num_add">
                    <a @click="on_minus(index)" class="minus fl">-</a>
                    <input v-model="cart_sku.count" @blur="on_input(index)" type="text" class="num_show fl">
                    <a @click="on_add(index)" class="add fl">+</a>
                </div>
            </li>
            <li class="col07">[[ (parseFloat(cart_sku.price) * parseInt(cart_sku.count)).toFixed(2) ]]元</li>
            <li class="col08"><a @click="on_delete(index)">删除</a></li>
        </ul>
        <ul class="settlements" v-cloak>
            <li class="col01"><input type="checkbox" name="" @change="on_selected_all" v-model="selected_all"></li>
            <li class="col02">全选</li>
            <li class="col03">合计(不含运费)：<span>¥</span><em>[[ total_selected_amount ]]</em><br>共计<b>[[ total_selected_count ]]</b>件商品</li>
            <li class="col04"><a href="{% url 'orders:settlement' %} ">去结算</a></li>
        </ul>
        <div class="footer">
            <div class="foot_link">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>
            </div>
            <p>CopyRight © 2021 北京小鱼商业股份有限公司 All Rights Reserved</p>
            <p>电话：010-****888    京ICP备*******8号</p>
        </div>
    </div>
    <script type="text/javascript">
        let carts = {{ cart_skus | safe }};

        // 将 selected 属性从字符串转换为布尔值
        carts.forEach(cart_sku => {
            cart_sku.selected = cart_sku.selected === 'True';
        });

        new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data: {
                carts: carts,
                selected_all: false,
                username: '{{ request.user.username }}'
            },
            computed: {
                total_selected_amount() {
                    let total = 0;
                    this.carts.forEach(cart_sku => {
                        if (cart_sku.selected) {
                            total += parseFloat(cart_sku.price) * parseInt(cart_sku.count);
                        }
                    });
                    return total.toFixed(2);
                },
                total_selected_count() {
                    let count = 0;
                    this.carts.forEach(cart_sku => {
                        if (cart_sku.selected) {
                            count += parseInt(cart_sku.count);
                        }
                    });
                    return count;
                }
            },
            methods: {
                on_minus(index) {
                    let cart_sku = this.carts[index];
                    if (parseInt(cart_sku.count) > 1) {
                        cart_sku.count = parseInt(cart_sku.count) - 1;
                        this.update_cart(cart_sku.id, cart_sku.count, cart_sku.selected);
                    }
                },
                on_add(index) {
                    let cart_sku = this.carts[index];
                    cart_sku.count = parseInt(cart_sku.count) + 1;
                    this.update_cart(cart_sku.id, cart_sku.count, cart_sku.selected);
                },
                on_input(index) {
                    let cart_sku = this.carts[index];
                    let count = parseInt(cart_sku.count);
                    if (isNaN(count) || count < 1) {
                        cart_sku.count = 1;
                    }
                    this.update_cart(cart_sku.id, cart_sku.count, cart_sku.selected);
                },
                update_selected(index) {
                    let cart_sku = this.carts[index];
                    this.update_cart(cart_sku.id, cart_sku.count, cart_sku.selected);
                },
                on_selected_all() {
                    this.carts.forEach(cart_sku => {
                        cart_sku.selected = this.selected_all;
                        this.update_cart(cart_sku.id, cart_sku.count, this.selected_all);
                    });
                },
                update_cart(sku_id, count, selected) {
                    axios.put('/carts/', {
                        sku_id: sku_id,
                        count: count,
                        selected: selected
                    }).then(response => {
                        if (response.data.code === '0') {
                            let cart_sku = this.carts.find(item => item.id === sku_id);
                            if (cart_sku) {
                                cart_sku.count = count;
                                cart_sku.selected = selected;
                                cart_sku.amount = (parseFloat(cart_sku.price) * count).toFixed(2);
                            }
                        } else {
                            console.log(response.data.errmsg);
                        }
                    }).catch(error => {
                        console.log(error);
                    });
                },
                on_delete(index) {
                    let cart_sku = this.carts[index];
                    axios.delete('/carts/', {
                        data: {
                            sku_id: cart_sku.id
                        }
                    }).then(response => {
                        if (response.data.code === '0') {
                            this.carts.splice(index, 1); // 从前端列表中移除该商品
                        } else {
                            console.log(response.data.errmsg);
                        }
                    }).catch(error => {
                        console.log(error);
                    });
                }
            }
        });
    </script>
    {% load static %}<script type="text/javascript" src="{% static 'js/common.js' %} "></script>
    {% load static %}<script type="text/javascript" src="{% static 'js/detail.js' %} "></script>
</body>
</html>